<template>
  <div>
    <Top :activeIndex=-1></Top>
    <div id="container" style="margin-left: 250px;margin-top: 40px">
      <div class="clearfix">
        <div class="content_l">
          <dl class="job_detail" v-loading="loading">
            <dt>
              <h1 title="内容运营">
                <em></em>
                <div>{{pageInfo.businessName}}</div>
                {{pageInfo.positionName}}
              </h1>
              <a v-if="!isCollection" @click="addJobCollection()" class="inline jd_collection"></a>
              <a v-if="isCollection" @click="deleteJobCollection()" class="inline jd_collection2"></a>
            </dt>
            <dd class="job_request">
              <span class="red">{{pageInfo.minSalary}}k-{{pageInfo.maxSalary}}k</span>
              <span>{{pageInfo.city}}</span>
              <span>经验：{{pageInfo.workExp}}</span>
              <span> {{pageInfo.eduRequirements}}及以上</span>
              <span>{{pageInfo.jobNature}}</span><br/>
              职位福利 :{{pageInfo.welfare}}
              <div>发布时间：{{makeSimpleDate(pageInfo.createTime)}}</div>
            </dd>
            <dd class="job_bt">
              <h3 class="description">职位描述</h3>
              <p>{{pageInfo.workDescription}}</p>
            </dd>
            <dd>
              <a @click="setApplicants" class="inline btn fr btn_apply">投个简历</a>
            </dd>
          </dl>
          <div id="weibolist"></div>
        </div>
        <div class="content_r">

          <baidu-map class="map" :center="{lng: pageInfo.jd, lat: pageInfo.wd}" :zoom="16"  :scroll-wheel-zoom="true">
            <bm-marker :position="{lng: pageInfo.jd, lat: pageInfo.wd}" :dragging="true" >

            </bm-marker>
          </baidu-map>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Top from '../header/Header'
  import {makeSimpleDate} from "../../common/js/dateformat"
  export default {
    name: "position-detail",
    components: {
      Top
    },
    data() {
      return {
        isCollection: false,
        loading:false,
        isUser: false,
        user: {},
        positionId: '',
        pageInfo: {},
      }
    },
    created() {
      this.setUser();
      this.positionId = this.$route.params.positionId
      this.getPosition();    //获得职位信息详情。
      this.getJobCollection();//获得收藏记录
    },
    methods: {
      setUser() {
        var user = this.$store.state.user;
        if (JSON.stringify(user) !== "{}") {
          this.user = user;
          this.isUser = true;
        }
      },
      getPosition() {
        this.loading=true;
        this.$ajax.post(this.$config.url + "position/selPositionById", {
          "positionId": this.positionId
        }).then(res => {
          console.log(res.data.message);
          if (res.data.message === "succ") {
            this.pageInfo = res.data.object;
            this.loading=false;
          } else {
            this.$message.error("出错了，无这个职位信息")
            this.loading=false;
          }
        })
      },
      //查询有无收藏记录
      getJobCollection(){
        this.$ajax.post(this.$config.url + "jobCollection/selJobCollection", {
          "userId": this.user.userId,
          "positionId": this.positionId
        }).then(res => {
          if (res.data.message === "succ") {
            this.isCollection=true;
          }
        })
      },

      //加入收藏
      addJobCollection(){
        if(this.user.userId!=null){
          this.$ajax.post(this.$config.url + "jobCollection/addJobCollection", {
            "userId": this.user.userId,
            "positionId": this.positionId
          }).then(res => {
            console.log(res.data.message);
            if (res.data === "succ") {
              this.isCollection=true;
              this.$message.success("收藏成功")
            } else {
              this.$message.error("出错了，无法添加收藏")
            }
          })
        }else{
          this.$message.warning("请您先登录求职者角色")
        }


      },
      //取消收藏
      deleteJobCollection(){
        this.$ajax.post(this.$config.url + "jobCollection/deleteJobCollection", {
          "userId": this.user.userId,
          "positionId": this.positionId
        }).then(res => {
          console.log(res.data.message);
          if (res.data === "succ") {
            this.isCollection=false;
            this.$message.success("已取消收藏")
          } else {
            this.$message.error("出错了，取消失败")
          }
        })
      },

      makeSimpleDate(date) {
        return makeSimpleDate(date);
      },
      //投递简历
      setApplicants(){
        if(this.user.userId!=null){
          this.$ajax.post(this.$config.url + "applicants/AddApplicant", {
            "positionId": this.positionId,
            "userId":this.user.userId,
            "applicationType":0,
          }).then(res => {
            if (res.data=== "succ") {
              this.$message.success({
                showClose: true,
                message: '投递成功！'
              })
            } else if(res.data=== "isExist"){
              this.$message.warning({
                showClose: true,
                message: '已经投递过该岗位！'
              })
            }
            else {
              this.$message.error("出错了，无这个职位信息")
            }
          })
        }else{
          this.$message.warning("请您先登录求职者角色")
        }

      },
      //查询收藏记录
    },
    beforeRouteLeave (to, from, next) {
      if (to.path == "/positionSelect") {
        to.meta.keepAlive = true;
      } else {
        to.meta.keepAlive = false;
      }
      next();
    }
  }
</script>

<style scoped>
  .content_l{ float:left; width:680px;}
  .content_l h1{font-weight:normal; line-height:42px; margin:0 0 20px 0;}
  .job_detail{ padding-bottom:30px;background:#fafafa; margin-top:6px;}
  .job_detail dt{padding-right:35px;}
  .job_detail dt h1{max-width:440px;float:left; color:#fff; font-size:30px; line-height:38px; background:#91cebe; margin:-6px 0 10px 35px; *margin:-14px 0 10px 35px; padding:6px 20px;}
  .job_detail dt em{ background:url(img/title_arrow.png) no-repeat; width:6px; height:8px; position:absolute; margin:-6px 0 0 -26px; *margin:-6px 0 0 -21px;}
  .job_detail dt h1 div{font-size:14px; line-height:14px; font-weight:normal; margin:0 0 10px -5px;}
  .job_detail dd{padding:15px 35px 10px 35px;color:#777;word-wrap: break-word; overflow:hidden;}
  .job_detail dd h3.description{ font-size:16px; color:#555; border-left:7px solid #91cebe; padding:2px 0 0 7px; line-height:16px; margin-bottom:20px;}
  .job_detail ol{margin:0; padding-left:20px; line-height:35px;}
  .jd_collection{width:48px;height:71px;cursor: pointer;position:relative;*z-index:999;background:url(img/collection_icon.png) 0 0 no-repeat;float:right;}
  .jd_collection2{width:48px;height:71px;cursor: pointer;position:relative;*z-index:999;background:url(img/collection_icon.png) 0 100% no-repeat;float:right;}

  .job_request{ clear:both; font-size:20px; line-height:40px; border-bottom:1px solid #e5e5e5;}
  .job_request span{padding-left:20px;background:url(img/jd_icon.png) left center no-repeat;}
  .job_request span.red{color:#e6775c;font-size:24px;}
  .job_request div{font-size:14px;color:#777; line-height:22px;margin-top:10px;}
  .btn_apply{padding:0 22px; font-size:20px; height:43px;line-height:43px;background-image:none;margin-top:25px;}
  .btn{padding: 0 55px;font-size: 18px;color: #fff;border: none;height: 32px;line-height: 32px;background: #019875;float: left;margin: 15px 40px 0 0;overflow: hidden;transition:background 0.2s ease-in 0s;}
  .btn:hover{color:#fff;background:#196f3d;}
  .map {
    width: 400px;
    height: 400px;
  }
  .content_r{ float:left; width:500px; margin-left:64px;}
</style>